<template>
  <div class="login">
    <LoginHeader>
      <a href="#" slot="right" class="link-white" @click.prevent="$router.push('/register')">没有账号？请注册</a>
    </LoginHeader>
    
    <section class="content">
      
      <div class="form-wrap">
        <div class="f24 c1">
          账号登录
        </div>
        <Form ref="loginForm" :model="loginForm" :rules="loginRules" class="mt20">
          <FormItem label="" prop="username">
              <Input type="text" v-model="loginForm.username" icon="ios-person-outline" placeholder="请输入手机号或会员名"></Input>
          </FormItem>
          <FormItem label="" prop="password">
              <Input type="password" v-model="loginForm.password" placeholder="请输入密码" icon="md-key"></Input>
          </FormItem>
          
          <FormItem>
              <Button type="primary" :loading="loading" @click="handleSubmit('loginForm')" long>登录</Button>
          </FormItem>
        </Form>
        
        <div class="mt20 clearfix f12">
          <span class="fl">
            <Checkbox v-model="remember">自动登录</Checkbox>
          </span>
          <span class="fr" @click="$router.push('/getPassword')">
            忘记密码？
          </span>
        </div>
      </div>
    </section>
    
    <AppFooter></AppFooter>
  </div>
</template>


<script>
import AppFooter from '@/webPages/AppFooter.vue'
import LoginHeader from '@/adminPages/LoginHeader.vue'

export default {
  components:{AppFooter, LoginHeader},
  data(){
    return{
      remember: false,
      loading: false,
      loginForm: { username: '', password: ''},
      loginRules:{
        username:[
          {
            required: true, message: '账号不能为空'
          }
        ],
        password:[{
          required: true, message: '密码不能为空'
        }]
      }
    }
  },
  methods:{
    handleSubmit(form) {
      this.$refs[form].validate(valid => {
        if (!valid) {
          return
        }
        let params = {
          username: this.loginForm.username,
          password: this.loginForm.password
        }
        this.loading = true
        this.$postJson(this.$API.login, params).then(res => {
          this.loading = false
          if (res.errno === 0) {
            sessionStorage.token = res.data.token
            sessionStorage.userInfo = JSON.stringify(res.data.userInfo)
            const redirect = this.$route.query.redirect || '/admin/myCreated'
            this.$router.push(redirect)
          } else {
            this.$Message.error(res.errmsg)
          }
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>

 .content{
   padding: 80px 0;
   background:#f2f2f2 url(../assets/images/index/register_bg.png) no-repeat center center;
   .form-wrap{
     width: 360px;
     margin: auto;
     padding: 40px;
     background: #fff;
   }
 }
</style>
